<template>
  <div ref="wrapper" class="page-scroll-wrapper">
    <div class="page-scroll-content">
      <div class="loading-wrapper text-center">
        <img class="loading-img" src="~@/assets/svg/loading.svg" alt="" />
      </div>
      <slot></slot>

      <div v-show="data && data.length > 0" class="padding-xl text-center">
        <span v-show="!isLastPage && !isPullingUp">上拉加载更多</span>
        <span v-show="!isLastPage && isPullingUp">加载中···</span>
        <span v-if="isLastPage && !isPullingUp">没有更多了~</span>
      </div>
      <div v-show="!isPullingDown && (!data || data.length <= 0)" class="empty-box">暂无数据</div>
    </div>
  </div>
</template>

<script>
import BetterScroll from '@better-scroll/core';
import MouseWheel from '@better-scroll/mouse-wheel';
import Pulldown from '@better-scroll/pull-down';
import Pullup from '@better-scroll/pull-up';
import ObserveDom from '@better-scroll/observe-dom';

export default {
  props: {
    /**
     * 0 不派发scroll事件
     * 1 滚动的时候会派发scroll事件，会截流。
     * 2 滚动的时候实时派发scroll事件，不会截流。
     * 3 除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件
     */
    probeType: {
      type: Number,
      default: 0,
    },
    click: {
      type: Boolean,
      default: true,
    },
    // 上拉加载
    pullUp: {
      type: Boolean,
      default: true,
    },
    // 下拉刷新
    pullDown: {
      type: Boolean,
      default: true,
    },
    // 滚轮滚动
    // movingDirectionY: {
    //   type: Boolean,
    //   default: true,
    // },
    // 滚轮滚动
    mouseWheel: {
      type: Boolean,
      default: true,
    },
    data: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      page: {
        current: 1,
        totalPage: 0,
      },
      isPullingDown: false,
      isPullingUp: false,
    };
  },
  computed: {
    isLastPage() {
      return this.page.current >= this.page.totalPage;
    },
  },
  mounted() {
    // BetterScroll注册插件
    if (this.mouseWheel) {
      BetterScroll.use(MouseWheel);
    }
    if (this.pullUp) {
      BetterScroll.use(Pullup);
    }
    if (this.pullDown) {
      BetterScroll.use(Pulldown);
    }

    BetterScroll.use(ObserveDom);
    this.$nextTick(() => {
      this._initScroll();
      this.$emit('inited', this);
    });
  },
  methods: {
    _initScroll() {
      if (!this.$refs.wrapper) {
        return;
      }
      this.scroll = new BetterScroll(this.$refs.wrapper, {
        observeDOM: true,
        probeType: this.probeType,
        mouseWheel: this.mouseWheel,
        pullDownRefresh: this.pullDown
          ? {
            stop: 60,
          }
          : false,
        pullUpLoad: this.pullUp,
        click: this.click,
        mouse: true,//启用鼠标拖动
        touch: true//启用手指触摸
      });

      if (this.pullUp) {
        this.scroll.on('pullingUp', () => {
          if (this.page.current >= this.page.totalPage) {
            this.finishPullUp();
            return;
          }
          this.isPullingUp = true;
          this.page.current++;
          this.$emit('pullingUp', this);
        });
      }
      if (this.pullDown) {
        this.scroll.on('pullingDown', () => {
          this.page.current = 1;
          this.isPullingDown = true;
          this.$emit('pullingDown', this);
        });
      }
    },
    setTotalPage(page) {
      this.page.totalPage = page;
    },
    scrollTo(x, y, time = 300) {
      this.scroll && this.scroll.scrollTo(x, y, time);
    },
    finishPullUp() {
      this.isPullingUp = false;
      this.scroll && this.scroll.finishPullUp();
    },
    finishPullDown() {
      this.isPullingDown = false;
      this.scroll && this.scroll.finishPullDown();
    },
    refresh() {
      this.scroll && this.scroll.refresh();
    },
    autoPullDownRefresh() {
      this.scroll && this.scroll.autoPullDownRefresh();
    },
  },
  beforeDestroy() {
    this.scroll && this.scroll.destroy();
  },
};
</script>
<style lang="less" scoped>
.page-scroll-wrapper {
  height: 100%;
  overflow-x: auto;

  .page-scroll-content {
    position: relative;
  }

  .loading-wrapper {
    position: absolute;
    width: 100%;
    transform: translateY(-100%) translateZ(0);
    padding: 10px;
  }

  .loading-img {
    width: 50px;
    height: 50px;
  }

  .empty-box {
    text-align: center;
    padding-top: 10%;
  }
}
</style>
